<% extends "common/msui.html" %>
<% block title %>订单列表<% endblock %>
<% block body %>
<div class="page" id="order-list" ms-controller="address">
  <header class="bar bar-nav">
    <a class="button button-link button-nav pull-left back" href="/mshop/index" >
      <span class="icon icon-left"></span>
      返回
    </a>
    <h1 class="title">订单列表</h1>
  </header>

  <div class="content" >
    <div class="card" ms-repeat='orders' >
      <a ms-attr-href='/mshop/order?order_id={{el.id}}'>
        <div class='order-list-header'>
          <span>订单号：{{el.name}} (<span style='color:red'>{{el.invoice}}</span>)</span>
          <hr />
        </div>
        <div class="card-content order-list-content" >
          <ul><li ms-repeat='el.order_line' ms-if-loop='$index <= 2'><img ms-attr-src='/website/image/product.product/{{el}}/image' style='width: 4rem;height:4rem' /></li></ul>
        </div>
        <div class="card-footer order-list-footer">
          <div><span>总金额：</span><span>￥{{el.amount_total}}</span></div>
        </div>
      </a>
    </div>
  </div>

  <footer>
    <nav class="bar bar-tab index-footer">
      <a class="tab-item" href="/mshop?tab=index">
        <span class="icon icon-home"></span>
        <span class="tab-label">首页</span>
      </a>
      <a class="tab-item" href="/mshop?tab=cart">
        <span class="icon icon-cart"></span>
        <span class="tab-label">购物车</span>
      </a>
      <a class="tab-item" href="/mshop?tab=my">
        <span class="icon icon-me"></span>
        <span class="tab-label">我的</span>
      </a>
    </nav>
  </footer>

  <script type="application/javascript" >
    $(function() {
      var partner_id = ${partner_id|safe};

      var sync_content = function() {
        $.ajax({
          url: '/mshop/order/get_list',
          data: {partner_id: partner_id},
          type: 'post',
          success: function(e) {
            order_list_vm.orders = JSON.parse(e);
          },
          async: true,
        });
      }

      sync_content()

      var order_list_vm = avalon.define({
        $id: 'address',
        orders: [],
        partner_id: partner_id,
      });

      $(document).on('pageReinit', '#order-list', function(e, pageId, $page) {
        sync_content();
      });

      avalon.scan();
    });

  </script>

<% endblock %>
</div>